<template>
  <!--    <div style="margin-left: 2%; margin-bottom: 1%">
          <div>
            <el-button icon="el-icon-plus" @click="selectAppVisible = true"></el-button>
          </div>
          <span>Add</span>
        </div>-->
  <div>
    <el-card shadow="never">
      <template #header>
        <div class="flex items-center">
          <h1 class="text-sm leading-7 font-semibold flex-1">
            {{ $t('group.application') }}
          </h1>
          <div class="flex justify-between" v-if="isAuth('10400006.MANAGE')">
            <el-button
              type="primary"
              class="w-8"
              @click="selectAppVisible = true"
            >
              <svg-icon icon-class="plus" :style="{ fontSize: '24px' }" />
            </el-button>
          </div>
        </div>
      </template>

      <div>
        <el-empty v-if="appList.length === 0" description=""> </el-empty>
        <el-row>
          <!-- // TODO: 做一下适配 -->
          <el-col :span="6" v-for="app in appList" :key="app.appFileId">
            
            <div class="m-0 mx-2 mb-5">
              <el-card class="rounded-md relative" shadow="hover" :body-style="{ padding: '0px' }">
                <div
                class="mt-2 mr-2 flex justify-end"
                v-if="isAuth('10400006.MANAGE')"
              >
                <el-dropdown
                  @command="
                    (command) => {
                      handleAppCommand(command, app)
                    }
                  "
                >
                <el-button text size="small" class="w-6">
                <svg-icon icon-class="MoreFilled" />
              </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="selectVersion">
                        <span
                          ><svg-icon icon-class="Setting" />
                          {{ $t('page.changeVersion') }}
                        </span>
                      </el-dropdown-item>
                      <el-dropdown-item command="delete">
                        <span class="text-center"
                          ><svg-icon icon-class="Delete"/>
                          {{ $t('page.delete') }}</span
                        >
                      </el-dropdown-item>
                    </el-dropdown-menu></template
                  >
                </el-dropdown>
                <!--<button type="button" class="button-grey-danger" style="font-size: 1.1em;" @click="removeApp(app.appFileId)">
                  <i class="el-icon-delete" />
                </button>-->
              </div>
                <div class="p-5">
                  <div class="flex flex-col items-center">
                    <div>
                      <a @click="handleAppVersionChange(app)">
                        <img
                          :src="getImg(app.iconUrl, app.os)"
                          class="app-logo"
                          alt
                          @error="
                            () =>
                              (app.iconUrl =
                                '/src/assets/images/default-icon.png')
                          "
                        />
                      </a>
                    </div>
                    <span class="text-md leading-md">{{ app.appName }}</span>
                    <span class="text-sm text-secondary leading-6 mb-3">{{
                      app.version
                    }}</span>
                  </div>
                </div>
              </el-card>
  
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- app版本选择提示框 -->
    <el-dialog v-model="appVisible" title="Change Version" width="400px">
      <el-form
        ref="apkVersionForm"
        :model="apkVersionForm"
        :rules="apkVersionRule"
        label-position="top"
      >
        <el-form-item :label="$t('group.version')" prop="appFileId">
          <el-select
            v-model="apkVersionForm.appFileId"
            :placeholder="$t('group.tip_selectVersion')"
            class="w-full"
          >
            <el-option
              v-for="apkVersion in apkVersions"
              :key="apkVersion.versionId"
              :label="apkVersion.versionName"
              :value="apkVersion.appFileId"
            />
          </el-select>
        </el-form-item> </el-form
      ><template #footer>
        <span class="dialog-footer">
          <el-button
            v-if="isAuth('10400006.MANAGE')"
            @click="appVisible = false"
            text
            >{{ $t("common.cancel") }}</el-button
          >
          <el-button
            v-if="isAuth('10400006.MANAGE')"
            
            type="primary"
            @click="confirmAppVersionHandle"
            >{{ $t('common.confirm') }}</el-button
          >
        </span></template
      >
    </el-dialog>

    <selectApp v-model="selectAppVisible" :child-data="{ groupId: groupId }" />
  </div>
</template>

<script>
import { delApk, groupDetails, updGroupApkVersion } from '@/api/group'
import { getAppVersionList } from '@/api/group'
import selectApp from './selectApp'
import { getIcon } from '@/utils'
import { isAuth } from '@/utils'
import CardMenuButton from '@/components/CardMenuButton'

export default {
  props: [`groupId`],
  components: {
    selectApp,
    CardMenuButton
  },
  data() {
    return {
      selectAppVisible: false,
      currentDate: new Date(),
      appList: [],
      autoDownload: true,
      dataListLoading: false,
      appVisible: false,
      curClickItem: {},
      apkVersions: [],
      apkVersionForm: {
        appFileId: undefined
      },
      apkVersionRule: {
        appFileId: [
          {
            required: true,
            message: 'Please select a version',
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    getImg(url, os) {
      return getIcon(url, os)
    },
    iconView(icon) {
      if (icon) {
        return import.meta.env.VITE_APP_BASE_API + icon
      }
      return require('@/assets/img/Android.png')
    },
    handleAppCommand(command, data) {
      if (command == 'delete') {
        this.deleteHandle(data)
      } else if (command == 'selectVersion') {
        this.handleAppVersionChange(data)
      }
    },
    deleteHandle(item) {
      this.curClickItem = item
      this.$confirm(
        this.$t('group.tip_delete_app', { pkgName: this.curClickItem.appName }),
        this.$t('common.tip'),
        {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }
      )
        .then(() => {
          console.log('deleteHandle')
          this.curClickItem = item
          let params = {
            appPackageName: this.curClickItem.appPackageName,
            appFileId: item.appFileId,
            oper: 'del',
            version: item.version
          }
          let reqData = []
          reqData.push(params)
          let data2 = {
            apkDtoList: reqData
          }
          delApk(this.groupId, data2)
            .then((res) => {
              console.log('delApk')
              this.getDataList()
            })
            .catch((err) => {
              this.$confirmError(err)
            })
        })
        .catch(() => {})
    },
    handleAppVersionChange(data) {
      if (!this.isAuth('10400006.MANAGE')) {
        return
      }
      this.appVisible = true
      this.curClickItem = data
      this.apkVersionForm.appFileId = data.appFileId
      // this.queryAppVersionList(data.appPackageName)
      getAppVersionList({
        packageName: data.appPackageName,
        versionStyle: 1
      })
        .then((res) => {
          this.apkVersions = res
        })
        .catch((e) => {
          this.$confirmError(e)
        })
    },
    confirmAppVersionHandle() {
      console.log('confirmAppVersionHandle')
      console.log(this.curClickItem)
      var choosed = this.apkVersions.find(
        (item) => item.appFileId === this.apkVersionForm.appFileId
      )
      this.$confirm(
        this.$t('group.tip_changeAppVersion', {
          pkgName: this.curClickItem.appPackageName,
          oldVersion: this.curClickItem.version,
          newVersion: choosed.versionName
        }),
        this.$t('common.tip'),
        {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }
      )
        .then(() => {
          console.log(choosed)
          let data = {
            appPackageName: this.curClickItem.appPackageName,
            version: choosed.versionName
          }
          updGroupApkVersion(this.groupId, this.curClickItem.appFileId, data)
            .then((res) => {
              console.log('updGroupApkVersion')
              this.appVisible = false
              this.$message.success(this.$t('common.update_success'))
              this.getDataList()
            })
            .catch((e) => {
              this.$confirmError(e)
            })
        })
        .catch(() => {})
    },
    getDataList() {
      this.dataListLoading = true
      groupDetails(this.groupId)
        .then((data) => {
          this.appList = data.apps
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataListLoading = false
          this.$confirmError(e)
        })
    },
    isAuth
  },
  watch: {
    groupId(value) {
      if (value) {
        this.getDataList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/application/app-container.scss';
.block .image {
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  position: center;
  display: inline-block;
}

.block .content {
  width: auto;
  display: inline-block;
}

.block span {
  display: block;
  color: #333;
}

.block p {
  padding-left: 20px;
  float: left;
  width: 160px;
}

.block.active {
  border: 1px solid rgba(244, 244, 244, 0.8);
  color: rgba(2, 2, 11, 0.73);
  background-color: rgba(244, 244, 244, 0.8);
}

.block span:first-child {
  margin-top: 3px;
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: 500;
  width: 100%;
}

.app-logo {
  width: 100px;
}

/*
.app-list {
  .icon {
    width: 72px;
    height: 72px;
    position: relative;

    &--add {
      background: #e2e6ed;
    }

    & > .cross {
      position: absolute;
      font-size: 32px;

      .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      color: #7993b8;
    }
  }
}

.card-header {
  border-bottom: 1px solid #ebeef5;
  padding: 18px 20px;
  margin: 0 -20px 20px;
}*/
</style>
